<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div id="app">
			<h4>查询数据</h4>
			<form>
				日期：<input name="datafile" type="date" />
				至：<input name="datafile" type="date" />
				<button>查&nbsp;&nbsp;询</button>
			</form>
			<table cellspacing="0" cellpadding="0" border="1">
				<tr><th>日期</th><th>红1</th><th>红2</th><th>红3</th><th>红4</th><th>红5</th><th>红6</th><th>蓝球</th><th>销量</th><th>头等奖</th><th>二等奖</th></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
				<tr><td colspan="8">合计</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
			</table>
			<div id="pages">
				<span>首页</span><span class="current">1</span><span>2</span><span>3</span><span>尾页</span>
			</div>
		</div>
	</body>
</html>

<style>
	html,
	body {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		margin: 50px;
	}

	form {
		text-align: right;
		display: inline-block;
	}
	
	input{
		width: 200px;
	}

	button {
		padding: 0px 20px;
	}
	
	form{
		margin: 10px 0px;
	}
	
	table{
		width: 100%;
		border-spacing: 0px;
	}
	
	th,td{
		padding: 3px;
	}
	
	td{
		text-align: right;
	}
	
	th{
		background-color: aqua
	}
	td:nth-child(1){
		text-align: center;
	}

	#pages{
		padding: 10px;
		text-align: right;
	}
	#pages>span{
		background-color: #ddd;
		margin: 2px;
		padding: 2px 5px;
		border-radius: 2px;
		min-width: 15px;
		display: inline-block;
		text-align: center;
		cursor: pointer;
	}
	#pages>span.current{
		background-color: #aaa;
	}
	#pages>span:hover{
		background-color: beige;
		color: green;
	}

</style>
